<template>

<div class="icons">
 <swiper ref="mySwiper" :options="swiperOption">
     <swiper-slide v-for='(item,index) in page' :key = "index">
        
        <div class="icon-item" v-for="(icon, id) in item" :key="id">
                <img :src="icon.url" alt="">
                <p>{{icon.title}}</p>
        </div>
    
     </swiper-slide>
     
 </swiper>
 </div>

    
</template>
<script>
export default ({
    props:['iconList'],
    data() {
        return {
            swiperOption:{},
            
        }
    },
    computed:{
        page (){
            let pages = [];
            this.iconList.forEach((item,index) => {
                let idx = Math.floor(index/8)
                if(!pages[idx]) pages[idx] = []
                pages[idx].push(item)
            });
            return pages
        }
    }
})
</script>
<style scoped>
.icons{
    background-color: #fff
}
.icon-item{
    height: 0;
    width: 25%;
    padding-bottom: 20%;
    font-size: .24rem;
    color: #333333;
    margin-top: .4rem;
    float: left;
    text-align: center;
}
.icons img{
    width: 1.1rem;
    height: 1.1rem;
    display: block;
    margin: 0 auto;
    padding-bottom: .1rem;
}
</style>